<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <span th:include="~{include::hello}"></span>
    <script>
        $(function () {
           $.get(
               "list",
               function (data) {
                   console.log(data);
                   for(let i in data){
                       $("table").append("<tr><td>"+data[i].eid+"</td><td>"+data[i].name+"</td><td>"+data[i].age+
                           "</td><td>"+data[i].dname+"</td><td><button class='btn btn-warning' value='"+data[i].eid+
                           "'>删除</button>&nbsp;&nbsp;<button value='"+data[i].eid+"' class=\"btn btn-edit\" data-toggle=\"modal\" data-target=\"#myModal\">编辑</button></td></tr>");
                   }
                   //添加前清空文本框
                   $(".btn-primary").click(function () {
                           $("form input").val("");
                           //获取下拉框的部门信息
                       $("[name='did']").empty();
                       $("[name='did']").append("<option value=' '>--请选择--</option>");
                           $.get(
                               "depts",
                                function (obj) {
                                    for(let i in obj){
                                        $("[name='did']").append("<option value='"+obj[i].did+"'>"+obj[i].dname+"</option>");
                                    }
                                }
                           )
                   })

                   //修改的回显
                   $(".btn-edit").click(function () {
                          let id=$(this).val();
                         // alert(id);
                          //为部门下拉框赋值
                       $("[name='did']").empty();
                       $("[name='did']").append("<option value=' '>--请选择--</option>");
                       $.get(
                           "depts",
                           function (obj) {
                               for(let i in obj){
                                   $("[name='did']").append("<option value='"+obj[i].did+"'>"+obj[i].dname+"</option>");
                               }
                           }
                       );
                          $.get(
                              "find/"+id,
                              function (obj) {
                                  if(obj!=null){
                                      //回显员工
                                      $("[name='eid']").val(obj.eid);
                                      $("[name='name']").val(obj.name);
                                      $("[name='age']").val(obj.age);
                                      //$("[name='did']").val(obj.did);
                                  }
                                  //回显部门（下拉框）
                                  $("[name='did']").val(obj.did);
                                  //回显单选按钮
                                 //$("[name='sex'][value='"+obj.sex+"']");
                              }
                          )
                   })
                   //删除
                   $(".btn-warning").click(function () {
                          let id=$(this).val();
                          // alert(id);
                          if(confirm("确认吗？")){
                              $.get(
                                  "del/"+id,
                                  function (obj) {
                                       if(obj){
                                           alert("删除成功！");
                                           location.reload();
                                       }else{
                                           alert("sorry！");
                                       }
                                  }
                              )
                          }
                   })
               }
           );//end
            $(".btn-save").click(function () {
                  $.post(
                      "/save",
                      $("form").serialize(),
                      function (obj) {
                            if(obj){
                                alert("OK");
                                location.reload();
                            }else{
                                alert("Sorry！");
                            }
                      }
                  )
            })
        })
    </script>
</head>
<body>

       <div class="container">
             <table class="table table-hover table-bordered">
                 <tr>
                     <td>编号</td>
                     <td>姓名</td>
                     <td>年龄</td>
                     <td>部门</td>
                     <td>
                         <button class="btn btn-primary" data-toggle="modal" data-target="#myModal">
                             添加
                         </button>
                     </td>
                 </tr>
             </table>

           <!-- Modal -->
           <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
               <div class="modal-dialog">
                   <div class="modal-content">
                       <div class="modal-header">
                           <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                           <h4 class="modal-title" id="myModalLabel">新增/编辑</h4>
                       </div>
                       <div class="modal-body">
                           <form>
                               <input type="hidden" name="eid">
                               <input type="text" name="name" placeholder="姓名"><br>
                               <input type="text" name="age" placeholder="年龄"><br>
                               部门：<select name="did">

                                    </select>
                           </form>
                       </div>
                       <div class="modal-footer">
                           <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                           <button type="button" class="btn btn-save">保存</button>
                       </div>
                   </div><!-- /.modal-content -->
               </div><!-- /.modal-dialog -->
           </div><!-- /.modal -->
       </div>

</body>
</html>